<template>
  <div class="min-h serveProject bg-wt">
    <SearchForm
      :searchData="pagination"
      @handleClear="handleClear"
      @handleSearch="handleSearch"
    ></SearchForm>
    <DialogForm
      ref="sunCom"
      :title="title"
      :visible="visible"
      :data="formBaseData"
      @handleClose="handleClose"
      @handleAdd="handleAdd"
      @handleEdit="handleEdit"
    ></DialogForm>
    <div class="marg-main newBox">
      <button class="bt wt-120" @click="open">新增护理项目</button>
    </div>
    <!-- 需要将父组件中的data数据传递给子组件
        1.子组件上的标签上使用 :变量名="变量名" 
        2.子组件上使用 defineProps({变量名:类型})
        需要将父组件中的函数传递给子组件
        1.子组件上的标签上使用 @函数名="函数名" 
        2.子组件上使用 defineEmits(['函数名'])
    -->
    <TableList
      :data="data"
      :total="total"
      :pagination="pagination"
      @onChange="onChange"
      @openUpdate="openUpdate"
      @deleteById="deleteById"
      @startStatus="startStatus"
    ></TableList>

    <DELETE
      :visible="dialogDeleteVisible"
      :delete-text="operateText"
      @handle-delete="handleDelete"
      @handle-close="handleCloseDelete"
    ></DELETE>
    <!-- 禁用弹层 -->
    <Forbidden
      :visible="dialogVisible"
      :text="operateText"
      @handle-submit="handleForbiddenSub"
      @handle-close="handleForbiddenClose"
    ></Forbidden>
  </div>
</template>
<script lang="tsx" setup>
import { ref, onMounted } from 'vue'

// 导入serve.ts中封装好的发送异步请求的方法
import { MessagePlugin } from 'tdesign-vue-next'
import {
  getProjectList,
  projectAdd,
  getProjectDetails,
  projectUpdate,
  projectDelete,
  projectStatus
} from '@/api/serve'
// 导入TableList
import TableList from './components/TableList.vue'
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'
import DELETE from '@/components/OperateDialog/index.vue'
import Forbidden from '@/components/Forbidden/index.vue'
// 表格的列表数据
const data = ref([])
// 分页总记录数
const total = ref(0)
// 分页参数
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  name: '',
  status: ''
})
// 页面加载完后发送异步请求从后台获取列表数据 --> onMounted
onMounted(() => {
  search()
})

const search = async () => {
  // 发送异步请求
  const res: any = await getProjectList(pagination.value)
  // 将数据返回给谁
  data.value = res.data.records
  // 将返回的总记录数赋值给total
  total.value = res.data.total
}
const onChange = (pageInfo) => {
  // 将current 赋值给 pagination.pageNum
  pagination.value.pageNum = pageInfo.current
  // 将pageSize赋值给 pagination.pageSize
  pagination.value.pageSize = pageInfo.pageSize
  search()
}
// 清空数据重新查询
const handleClear = (val) => {
  pagination.value.pageNum = 1
  // 判断是否为name
  if (val === 'name') {
    pagination.value.name = ''
  } else if (val === 'status') {
    pagination.value.status = ''
  } else {
    pagination.value.name = ''
    pagination.value.status = ''
  }
  search()
}
// 搜索方法
const handleSearch = () => {
  pagination.value.pageNum = 1
  search()
}
// 对话框
const visible = ref(false)
const open = () => {
  visible.value = true
}
const title = ref('新增')
const sunCom = ref(null)
// 关闭
const handleClose = () => {
  title.value = '新增'
  visible.value = false
}
// 发送添加请求
const handleAdd = async (fromData) => {
  const res: any = await projectAdd(fromData)
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    handleClose()
    search()
    sunCom.value.handleClear()
  } else {
    MessagePlugin.error('添加失败')
  }
}

// 修改
const formBaseData = ref({})
const getById = async (val) => {
  const res: any = await getProjectDetails(val)
  if (res.code === 200) {
    formBaseData.value = res.data
  }
}

const openUpdate = (row) => {
  title.value = '修改'
  getById(row.id)
  visible.value = true
}
const handleEdit = async (fromData) => {
  const res: any = await projectUpdate(fromData)
  if (res.code === 200) {
    MessagePlugin.success('修改成功')
    handleClose()
    search()
  } else {
    MessagePlugin.error('修改失败')
  }
}
// 删除
const dialogDeleteVisible = ref(false)
const operateText = ref('护理项目')
// 点击删除
const deleteById = (row) => {
  dialogDeleteVisible.value = true
  id.value = row.id
}
const id = ref(0)
const handleDelete = async () => {
  const res = await projectDelete(id.value)
  if (res.code === 200) {
    MessagePlugin.success('删除成功')
    handleCloseDelete()
    search()
  } else {
    MessagePlugin.error('删除失败')
  }
}
// 点击删除关闭
const handleCloseDelete = () => {
  dialogDeleteVisible.value = false
}
// 启用禁用
const typeId = ref(0)
const typeStatus = ref(0)
const statusText = ref('')
const dialogVisible = ref(false)
const startStatus = (val) => {
  typeId.value = val.id
  if (val.status === 1) {
    dialogVisible.value = true
    typeStatus.value = 0
    statusText.value = '禁用成功'
  } else {
    typeStatus.value = 1
    handleForbiddenSub()
    statusText.value = '启用成功'
  }
}
// 确定禁用
const handleForbiddenSub = async () => {
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  const res: any = await projectStatus(params)
  if (res.code === 200) {
    dialogVisible.value = false
    MessagePlugin.success(statusText.value)
    search()
  }
}
// 关闭禁用弹窗
const handleForbiddenClose = () => {
  dialogVisible.value = false
}
</script>
